<template>
	<view class="time-line-box">
		<view class="time-item-box" v-for="(item, index) in timeList" :key="index">
			<view class="box-left">
				<view class="left-icon">
					<image src="@/static/image/chat/finish.png" alt="" v-if="nowIndex > 0 && nowIndex > index" class="img1" />
					<image src="@/static/image/chat/progress.png" alt="" v-if="nowIndex === index" class="img1" />
					<image src="@/static/image/chat/future.png" alt="" v-if="index > nowIndex" class="img3" />
				</view>
				<view class="left-line" :style="index >= nowIndex ? 'opacity: 0.6;' : ''" v-if="index < (timeList.length - 1)"></view>
			</view>
			<view class="box-right">
				<view class="right-text" :class="nowIndex === index ? 'now-text' : index > nowIndex ? 'next-text' : ''">{{ item.name }}</view>
				<view class="right-time" v-if="nowIndex > 0 && nowIndex > index && item.showTime">{{ item.showTime }}</view>
				<view class="right-box" v-if="nowIndex === index && (index === 1 || index === 3)">
					<view class="right-btn button-active" v-if="index === 1">{{ $t('order.Complete') }}</view>
					<view class="right-btn button-active" v-if="index === 3" @click="gotoPage('/pages/chat/SaleUpload')">{{ $t('dating.UploadCertificate') }}</view>
				</view>
				<view class="right-box" v-if="nowIndex > index && index === 3">
					<view class="right-pic-box">
						<image class="right-img" :src="$store.state.normalPic" fit="cover" v-for="(item, index) in 3" :key="index" @click="onPreviewImage(index)" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			nowIndex: 3,
			timeList: [
				{
					name: this.$t('newDeal.CreateOrder'),
					showTime: '2023-07-01 15:04:28'
				},
				{
					name: this.$t('newDeal.PayForOrder'),
					showTime: '2023-07-01 15:04:28'
				},
				{
					name: this.$t('newDeal.AcceptOrder'),
					showTime: '2023-07-01 15:04:28'
				},
				{
					name: this.$t('newDeal.SubmitCompleteVerification'),
					showTime: '2023-07-01 15:04:28'
				},
				{
					name: this.$t('newDeal.Paying'),
					showTime: ''
				},
				{
					name: this.$t('newDeal.OrderCompleted'),
					showTime: ''
				}
			]
		}
	},
	props: {},
	methods: {
		onPreviewImage(index) {
			uni.previewImage({
				current:index, //预览图片的下标
				urls: [this.$store.state.normalPic, this.$store.state.normalPic, this.$store.state.normalPic]//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			})
		},
		gotoPage(url, type) {
			if (type == 1) {
				uni.switchTab({
					url,
				});
				return;
			}
			uni.navigateTo({
				url,
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.time-line-box {
	width: 100%;
	height: fit-content;

	.time-item-box {
		width: 100%;
		display: flex;
		height: fit-content;
		margin-bottom: 4upx;

		.box-left {
			display: flex;
			flex-direction: column;
			align-items: center;
			.left-icon {
				width: 24upx;
				height: 40upx;
				display: flex;
				align-items: center;
				justify-content: center;
				.img1 {
					width: 24upx;
					height: 24upx;
				}
				.img3 {
					width: 16upx;
					height: 16upx;
				}
			}
			.left-line {
				width: 4upx;
				min-height: 80upx;
				background: #878787;
				flex-grow: 1;
				margin-top: 4upx;
			}
		}
		.box-right {
			flex: 1;
			padding-left: 32upx;
			box-sizing: border-box;
			.right-text {
				font-size: 28upx;
				font-weight: 400;
				color: #606665;
				line-height: 40upx;
			}
			.now-text {
				font-weight: 500 !important;
				color: #61BDB2 !important;
			}
			.next-text {
				opacity: 0.6;
			}
			.right-time {
				font-size: 24upx;
				font-weight: 400;
				color: #878787;
				line-height: 36upx;
			}
			.right-box {
				width: 100%;
				padding-bottom: 24upx;
				.right-btn {
					width: fit-content;
					padding: 0upx 16upx;
					height: 44upx;
					line-height: 44upx;
					display: flex;
					align-items: center;
					background: #61BDB2;
					border-radius: 80upx;
					font-size: 24upx;
					font-weight: 500;
					color: #FFFFFF;
					margin-top: 16upx;
					cursor: pointer;
				}
				.right-pic-box {
					margin-top: 8upx;
					display: flex;
					.right-img {
						width: 64upx;
						height: 64upx;
						border-radius: 8upx;
						border: 2upx solid rgba(0,0,0,0.05);
						margin-right: 16upx;
						cursor: pointer;
					}
				}
			}
		}
	}
}
</style>
